<template>
  <view class="video-page">
    <!-- 标题栏 -->
    <view class="page-title">视频广场</view>
    
    <!-- 分类Tab栏 -->
    <view class="category-tab">
      <text 
        class="tab-item" 
        :class="{active: currentCategory === item}"
        v-for="(item, index) in categoryList" 
        :key="index"
        @click="switchCategory(item)"
      >{{ item }}</text>
    </view>

    <!-- 视频列表 -->
    <scroll-view class="video-scroll" scroll-y>
      <view class="video-list-container">
        <!-- 引入VideoItem组件 -->
        <VideoItem 
          v-for="(video, index) in videoList" 
          :key="video.id"
          :video="video"
          @click="toVideoDetail"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script>
// 引入组件
import VideoItem from '../../components/VideoItem.vue';

export default {
  components: { VideoItem }, // 注册组件
  data() {
    return {
      categoryList: ['推荐', '千里眼', '搞笑', '娱乐', '社会', '音乐'],
      currentCategory: '推荐',
      // 视频数据（确保cover路径正确）
      videoList: [
        {
          id: 1,
          title: "这些箱子里装的中高档卷烟共有1350余条、27万余支，价值超百万！",
          cover: "/static/recommend1-cover.png", // 确保static目录有此图
          url: "/static/video1.mp4",
          duration: "01:46",
          author: { 
            name: "开心哈哈大笑...", 
            avatar: "/static/avatar1.png" 
          },
          likeCount: 379,
          commentCount: 90
        },
        {
          id: 2,
          title: "街头歌手翻唱《孤勇者》，一开口全场沸腾！",
          cover: "/static/video2-cover.png", // 确保static目录有此图
          url: "/static/video2.mp4",
          duration: "03:22",
          author: { 
            name: "音乐旅人", 
            avatar: "/static/avatar4.png" 
          },
          likeCount: 1256,
          commentCount: 218
        }
      ]
    };
  },
  methods: {
    switchCategory(category) {
      this.currentCategory = category;
    },
    toVideoDetail(video) {
      uni.navigateTo({
        url: `/pages/videoDetail/videoDetail?video=${encodeURIComponent(JSON.stringify(video))}`
      });
    }
  }
};
</script>

<style scoped>
.video-page {
  background: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.category-tab {
  display: flex;
  overflow-x: auto;
  padding: 15rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  white-space: nowrap;
  padding: 8rpx 20rpx;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.tab-item.active {
  color: #fff;
  background: #ff4d4f;
  border-radius: 20rpx;
}

.video-scroll {
  padding: 15rpx;
  height: calc(100vh - 150rpx);
}

.video-list-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>